<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/pure/1.0.0/pure-min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/pure/1.0.0/grids-responsive-min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header class="pure-menu pure-menu-horizontal">
      <a href="/" class="pure-menu-heading pure-menu-link">HOME</a>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="https://en.wikipedia.org/wiki/Lenna" class="pure-menu-link" target='_blank'>Lenna</a></li>
        <li class="pure-menu-item"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" class="pure-menu-link" target='_blank'>Web Audio API</a></li>
        <li class="pure-menu-item"><a href="https://github.com/rssilva/web-audio-image-filtering" class="pure-menu-link" target='_blank'>web-audio-image-filtering</a></li>
        <li class="pure-menu-item"><a href="http://www.ruanyifeng.com/blog/2017/12/image-and-wave-filters.html" class="pure-menu-link" target='_blank'>圖像與濾波（阮一峯）</a></li>
        <li class="pure-menu-item"><a href="https://gitee.com/spaceman007/lenna" class="pure-menu-link" target='_blank'>gitee</a></li>
      </ul>
    </header>
    <p>歡迎來到這裏!</p>
    <p>
      這是爲 <a href='http://www.ruanyifeng.com/blog/2017/12/image-and-wave-filters.html' target='_blank'>圖像與濾波</a> 所作的demo。感謝阮大神的這篇文章將我們帶入圖像世界。
      <span style='font-weight:bold;'>图像其实是一种波，可以用波的算法处理图像。</span> 下面我們將 Lenna 變成波，再藉助 <a href="https://github.com/rssilva/web-audio-image-filtering" target='_blank'>web audio image filtering</a> 提供的代碼，對這段波進行處理。希望對大家有幫助。
    </p>
    <p>
      濾波的處理相對正常情況下的即時響應稍微慢了點，可能要等1s才能看到圖像的變化。
    </p>
    <p>源碼都在 <a href="https://gitee.com/spaceman007/lenna" target='_blank'>這裏</a> 了，記得給個星星 :-]</p>
    <div class="pure-g canvasgroup">
      <div class="pure-u-1 pure-u-md-1-2">
        <canvas width='200' height='200' id='source'></canvas>
        <h3>原圖</h3>
      </div>
      <div class="pure-u-1 pure-u-md-1-2">
        <canvas width='200' height='200' id='result'></canvas>
        <h3>分量與濾波</h3>
        <form name='passform' action="javascript:void()" oninput='lo.value=lowpass.value;hi.value=highpass.value'>
          <input type='radio' name='passtype' value='lowpass' onclick='filterImage()'>
          <label for="lowpass">低通濾波:
            0 <input id='lowpass' name='lowpass' type="range" min='0' max='10000' step='2' value='0' onchange='filterImage()'> 10000
          </label>, value: <output name='lo' for='lowpass'>0</output><br>
          <input type='radio' name='passtype' value='highpass' onclick='filterImage()'>
          <label for="highpass">高通濾波:
            0 <input id='highpass' name='highpass' type="range" min='0' max='100000' step='2' value='0' onchange='filterImage()'> 100000
          </label>, value: <output name='hi' for='lowpass'>0</output><br>
        </form>
      </div>
    </div>
    <div style='margin:1em;'>
      顏色分量控制:
      <label for="red">Red <input id='red' type="checkbox" checked onchange='refreshImg()'> </label>&emsp;
      <label for="green">Green <input id='green' type="checkbox" checked onchange='refreshImg()'> </label>&emsp;
      <label for="blue">Blue <input id='blue' type="checkbox" checked onchange='refreshImg()'></label>&emsp;
    </div>
    <div class="pure-g">
      <div class="pure-u-1">
        <canvas id="wave" width='1600' height='600'></canvas>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/d3/4.12.2/d3.js"></script>
		<script src="./js/filter.js"></script>
		<script src="./js/canvas-utils.js"></script>
		<script src="./js/audio-utils.js"></script>
		<script src="./js/lenna-utils.js"></script>
    <script src="./js/lenna.js"></script>
  </body>
</html>
